<template>
    <div class="repair">
        <div class="title">尊贵的客户:为了解您的服务体验，请配合完成填写问卷，我们将继努力，持续完善服务!</div>
        <van-form
            show-error
            scroll-to-error
            label-width="25vw"
            @submit="onSubmit"
            @failed="onFailed" 
        >
            <MyTitle>在线评价</MyTitle>
            <van-field 
                v-model="formData.gsy_ex1" 
                :readonly="isReadonly"
                required
                center
                name="gsy_ex1" 
                label="服务时间"
                placeholder="服务时间" 
                :rules="[{ required: true, message: '请评价服务时间' }]"
            >
                <template #input>
                    <van-radio-group v-model="formData.gsy_ex1">
                    <van-radio 
                        v-for="(item, index) in radioGroup"
                        :key="'1-' + index"
                        :name="item"
                    >
                        {{ item }}
                    </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field 
                v-model="formData.gsy_ex2" 
                :readonly="isReadonly"
                required
                center
                name="gsy_ex2" 
                label="服务态度"
                placeholder="服务态度" 
                :rules="[{ required: true, message: '请评价服务态度' }]"
            >
                <template #input>
                    <van-radio-group v-model="formData.gsy_ex2">
                    <van-radio 
                        v-for="(item, index) in radioGroup"
                        :key="'2-' + index"
                        :name="item"
                    >
                        {{ item }}
                    </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field 
                v-model="formData.gsy_ex3" 
                :readonly="isReadonly"
                required
                center
                name="gsy_ex3" 
                label="服务技巧"
                placeholder="服务技巧" 
                :rules="[{ required: true, message: '请评价服务技巧' }]"
            >
                <template #input>
                    <van-radio-group v-model="formData.gsy_ex3">
                    <van-radio 
                        v-for="(item, index) in radioGroup"
                        :key="'3-' + index"
                        :name="item"
                    >
                        {{ item }}
                    </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <FixedButton v-if="!isReadonly" native-type="submit">提交</FixedButton>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showLoadingToast, closeToast, showFailToast  } from 'vant'
    import MyTitle from '@/components/MyTitle.vue'
    import FixedButton from '@/components/FixedButton.vue'
    import FieldPopupPicker from '@/components/FieldPopupPicker.vue'
    import FieldPopupDatePicker from '@/components/FieldPopupDatePicker.vue'
    import FieldPopupEsign from '@/components/FieldPopupEsign.vue'

    import { savesatisfactionSurveyApi, fileUploadBase64ExApi, idOrcApi } from '@/apis'
    import { isPhone, compressImg, isCardID, getSex, getAge } from '@/utils/utils.js'
    import { useStore } from '@/store'
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const isReadonly: boolean = false
    const formData = ref({
        gsy_ex1: '',
        gsy_ex2: '',
        gsy_ex3: '',
        gsy_id: route.query.szid_id ? route.query.szid_id : '',
        token: store.openid
    })
    const radioGroup: Raw<any[]> = markRaw(['非常满意', '满意', '一般', '不满意'])
    const onFailed = (value) => {
        showDialog({
            title: '提示',
            message: value.errors[0].message
        })
    }
    const onSubmit = async (value) => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        
        savesatisfactionSurveyApi({
            data: JSON.stringify(formData.value),
            // data: formData.value,
        }).then(res => {
            closeToast();
            if (res[0].status == '+OK') {
                showDialog({
                    title: '提示',
                    message: '提交成功！',
                }).then(() => {
                    router.push('/')                         
                });
            } else {
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                })
            }
            
        }).catch(err => {
            closeToast();
            showDialog({
                title: '提示',
                message: '网络异常，请稍后重试！',
            })
        })
    }
</script>
<style lang="scss" scoped>
    .repair {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    :deep(.van-form) {
        // height: 550px;
        // height: 510px;
        flex: 1;
        overflow: scroll;
    }
    .title {
        text-indent: 40px;
        padding: 10px 10px;
    }
    :deep(.van-radio) {
        margin: 10px 0;
    }
</style>